<template>
  <div id="app">
    <div id="container">
    </div>
    <div class="drivers">
      <div class="driver">
        <div class="driver-Img">
          <van-image round width="100px" height="100px" :src="driver.driverImgurl"/>
        </div>
        <div class="license-plate-number">{{ driver.carNumber }}</div>
        <div class="car">{{ driver.carColor }} | {{ driver.carName }}</div>
        <div class="driver-person">{{ driver.driverName }}
          <div class="driver-person-rate">
            <van-rate v-model="driver.driverPoint" :size="25" color="#ffd21e" void-icon="star" void-color="#eee"/> {{ driver.driverPoint }}分</div>
        </div>
        <div class="bottom">
          <van-button class="police" size="large" style="border: 2px solid red;color:red;width: 45%; background-color: #FEE5E5; display: inline-block;"
                      @click="ctrlC">
            <van-icon name="shield-o"/>
            <span id="contentToCopy">110</span>
          </van-button>
          <van-button class="urgent" size="large" style="border: 2px solid #9CCFE2;color:#9CCFE2;width: 45%; display: inline-block;" @click="ctrlC()">
            <van-icon name="phone-o" />
            <span>紧急联系人</span>
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {findSelectDriver} from "@/api/wait/receiveComponent"
import axios from "axios";

export default {
  name: 'InMotion',
  data() {
    return {
      selectedReasonType: 'self',  // 默认展开自己原因
      selectedSelfReason: '',
      selectedDriverReason: '',
      otherReasonText: '',
      map: null,
      startTime: null,
      formattedDuration: '1',
      show: false,
      direction: 'rtl',
      driverTime: null,
      driverLong: null,
      startaddress:"",
      endaddress:"",
      // 开始的经纬度
      startLatitudeAndLongitude: "",
      // 结束的经纬度
      endLatitudeAndLongitude: "",
      checkbox: false,
      checkboxGroup: [],
      driver:{},
      OrderInformation:{
        orderId:1,
      },
      //电话弹窗框
      showPhone:false,
      endOrder:null,
    };
  },
  mounted() {
    this.initAMap();
    this.endOrder = setInterval(this.selectOrderStatus, 3000);
  },
  unmounted() {
    this.map.destroy();
  },
  beforeDestroy() {
    clearInterval(this.endOrder);
  },
  //当页面进行渲染时就加载方法
  created() {
    this.sta();
    this.findDriver();
    this.selectOrderById();
  },
  methods: {
    selectOrderStatus(){
      axios.post('http://localhost:8081/wait/wait/selectOrderStatusIsArrive', this.OrderInformation).then(res=>{
        console.log(res);
        if (res.data==1) {
          this.$router.push({
            path: '/dest',
            query: {orderId: this.OrderInformation.orderId,driverId:this.driver.id}
          })
        }
      })
    },
    //call
    ctrlC() {
      window.location.href = 'tel:' + 110;
    },
    //接受页面传递的参数
    sta(){
      this.OrderInformation.orderId=this.$route.query.orderId;
    },
    //通过订单获取开始的位置
    selectOrderById(){
      axios.post('http://localhost:8081/wait/wait/selectOrderById', this.OrderInformation).then(res=>{
        if (res.status === 200) {
          this.startLatitudeAndLongitude=res.data.data.startingPoint;
          this.endLatitudeAndLongitude=res.data.data.destination;
          // 获取起点和终点的经纬度
        }
      })
    },
    //查询司机的信息
    findDriver(){
      findSelectDriver().then(res=>{
        this.driver=res.data;
      })
    },
    //高德地图API加载
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "9708bfa416d306b9dbaf55ea4e4a25f2",
      };
      let self = this;
      AMapLoader.load({
        key: "e6effe38515227141202b9fb6749424e", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale","AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      }).then((AMap) => {
        var map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923],//地图显示中心点坐标
        });
        // 逆地址
        var geocoder = new AMap.Geocoder({
          city: "", //城市设为北京，默认：“全国”
        });
        AMap.plugin(
            ["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
            function () {
              //异步同时加载多个插件
              var toolbar = new AMap.ToolBar();
              map.addControl(toolbar);
              var driving = new AMap.Driving({
                map: map,
              }); //驾车路线规划
              // var在函数作用外,否则无法调用
              var startTranse = self.startLatitudeAndLongitude.split(",");
              var endTranse = self.endLatitudeAndLongitude.split(",");
              driving.search(
                  // 因地址值用2214.111的经纬度,所以需要格式转换
                  new AMap.LngLat(parseFloat(startTranse[0]), parseFloat(startTranse[1])),
                  new AMap.LngLat(parseFloat(endTranse[0]), parseFloat(endTranse[1])),
                  function(status, result) {
                    if (status === "complete") {
                      console.log("绘制驾车路线完成", result);
                      // 在这一块需要设置加时时间和大概的路程多少公里,用四舍五入的方式计算
                      self.driverTime = Math.round(result.routes[0].time / 60);
                      self.driverLong = Math.round(result.routes[0].distance / 1000);
                      // 逆地理编码获取地址信息
                      var start = self.startLatitudeAndLongitude.split(",");
                      var end = self.endLatitudeAndLongitude.split(",");
                      // 寻找开始地址的方法
                      geocoder.getAddress(start, function(status, result) {
                        if (status === 'complete' && result.regeocode) {
                          self.startaddress = result.regeocode.formattedAddress;
                        } else {
                          console.log("获取开始地址失败");
                        }
                      });
                      // 寻找结束地址的方法
                      geocoder.getAddress(end, function(status, result) {
                        if (status === 'complete' && result.regeocode) {
                          self.endaddress = result.regeocode.formattedAddress;
                          console.log(result.regeocode + "end");
                        } else {
                          console.log("获取结束地址失败");
                        }
                      });
                      console.log(start,end)
                      var text = new AMap.Text({
                        position: new AMap.LngLat(end[0],end[1]),
                        text: '距离为' + self.driverLong + '公里 大约'+self.driverTime+'分钟',
                        offset: new AMap.Pixel(-20, -20)
                      })
                      map.add(text);
                    } else {
                      console.log("获取驾车数据失败：" + result);
                    }
                  }
              );
            }
        );
      })
    },

  },
};
</script>
<style scoped>
#app {
  .police{
    float: left;
    margin-top: 87px;
    margin-left: -110px;
  }
  .urgent{
    float: right;
    margin-top: 87px;
    margin-right: 7px;
  }
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 1000px;

  #container {
    width: 100%;
    height: 600px;
  }
  .drivers {
    width: 100%;
    height: 300px;
    .driver {
      float: left;
      width: 100%;
      height: 150px;
      .license-plate-number{
        float: left;
        width: 60%;
        height: 50px;
        font-weight: 700;
      }
      .driver-Img {
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        width: 100px;
        height: 100px;
        border-radius: 37px;
      }
      .car{
        float: left;
        width: 60%;
        height: 20px;
        margin-top: -22px;
        color: #CDCECE;
      }
      .driver-person{
        float: left;
        width: 60%;
        height: 20px;
        margin-top: 7px;
        .driver-person-rate{

          float: right;
          margin-left: 10px;
        }
      }
    }
    .contact{
      float: left;
      width: 50%;
      height: 30px;
      margin-left: -71px;
      margin-top: 21px;
      text-decoration: none;
    }
    .call{
      float: right;
      width: 50%;
      height: 30px;
      margin-right: -51px;
      margin-top: 21px;
      text-decoration: none;
    }
  }

  .choose{
    width: 300px;
    height: 600px;
    overflow: hidden;
    .en{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #f8f9fa;
      padding: 10px;
      text-align: center;
    }
    .cancel{
      font-weight: 700;
      font-size: 30px;
    }
  }

}

</style>

